// 渲染用户名
renderUser()

// 调用鉴权函数
checkLogin()

// 退出登录
logout()

// 显示弹框
// 获取模态框
const modalDom = document.querySelector('#modal')
// 实例化
const modal = new bootstrap.Modal(modalDom)
// show 显示  hide 隐藏
// 监听显示和隐藏 需要绑定事件 事件类型 'show.bs.modal' 显示触发 'hide.bs.modal' 隐藏触发
// 监听模态框的显示和隐藏
// document.querySelector('#openModal').addEventListener('click', function () {
//     // 显示模态框
//     modal.show()
// })
// modalDom.addEventListener('show.bs.modal', event => {
//     console.log('modal显示了')
// })
// modalDom.addEventListener('hide.bs.modal', event => {
//     console.log('modal隐藏了')
// })


// 数据增删改查
const list = document.querySelector('.list')
async function render() {
    const { data } = await axios.get('/students')
    // console.log(data)
    list.innerHTML = data.map(item => {
        return `
         <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
                <!-- gender 0男1女 -->
            <td>${item.gender ? '女' : '男'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province}${item.city}${item.area}</td>
            <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
            </td>
        </tr> 
`
    }).join('')
}
render()

const proSelect = document.querySelector('[name=province]')
const citSelect = document.querySelector('[name=city]')
const areaSelcet = document.querySelector('[name=area]')

// 初始化省市区
let p = ''
async function initSelect() {
    // 显示省份
    const { list } = await axios.get('/api/province')
    const html1 = list.map(item => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    proSelect.innerHTML = `<option >--省份--</option>` + html1
    // 切换省份 显示对应的城市
    proSelect.addEventListener('change', async function (e) {
        // 怎么获取切换的省份
        p = e.target.value
        const { list } = await axios.get(`/api/city?pname=${e.target.value}`)
        const html2 = list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        citSelect.innerHTML = `<option >--城市--</option>` + html2
        // 切换省份数据 还原地区
        areaSelcet.innerHTML = `<option >--地区--</option>`
    })
    // 切换城市 显示对应的地区
    citSelect.addEventListener('change', async function (e) {
        // 怎么获取切换的省份和城市
        const { list } = await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html3 = list.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        areaSelcet.innerHTML = `<option >--地区--</option>` + html3
    })
}
initSelect()

// 定义标识
let rowId

// 添加业务
document.querySelector('#openModal').addEventListener('click', function () {
    // 给定义的标识赋值
    rowId = null

    // 显示模态框
    modal.show()
})
// 编辑业务
list.addEventListener('click', async function (e) {
    // 判断事件源 是否为编辑
    if (e.target.classList.contains('bi-pen')) {
        // 给定义的标识赋值
        rowId = e.target.dataset.id
        // 数据回显
        // 1. 数据请求 拿到点击的数据
        const { data } = await axios.get(`/students/${rowId}`)
        // console.log(res)
        // 2. 给标签绑定数据
        // 2.1 给有规则的表单进行赋值(回显)
        const resArr = ['name', 'age', 'salary', 'group', 'hope_salary']
        resArr.forEach(item => {
            document.querySelector(`[name=${item}]`).value = data[item]
        })
        // 2.2 给性别进行赋值(回显) gender 0男1女
        const genders = document.querySelectorAll('[name=gender]')
        // console.log(genders[1])
        genders[data.gender].checked = true
        // 2.3 给籍贯进行赋值(回显)
        const { province, city, area } = data
        // 回显省份
        proSelect.value = province
        // 回显城市
        const { list: list1 } = await axios.get(`/api/city?pname=${province}`)
        const html2 = list1.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        citSelect.innerHTML = `<option >--城市--</option>` + html2
        // 回显 
        // 省市区下拉菜单回显, 首先下拉菜单有数据(省城区),给对应的标签设置value值
        citSelect.value = city
        // 回显地区
        const { list: list2 } = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3 = list2.map(item => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        areaSelcet.innerHTML = `<option >--地区--</option>` + html3
        // 回显 
        // 省市区下拉菜单回显, 首先下拉菜单有数据(省城区),给对应的标签设置value值
        areaSelcet.value = area


        // 显示模态框
        modal.show()
    }
    // 判断是否为删除按钮
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        const flag = confirm('您确定要删除吗???')
        // console.log(flag) true 确定 false 取消
        if (flag) {
            // 删除数据
            await axios.delete(`/students/${id}`)
            // 提示
            showToast('删除成功')
            // 渲染
            render()
        }

    }
})

const form = document.querySelector('#form')
// 点击确定按钮 添加和编辑
document.querySelector('#submit').addEventListener('click', async function () {
    // 判断是添加还是编辑
    if (rowId) {
        // 编辑 /students/{id} put
        // 1. 收集用户的信息
        const data = serialize(form, { hash: true, empty: true })
        // 2. 处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary

        // 3. 提交数据
        await axios.put(`/students/${rowId}`, data)
        // 4. 提示用户
        showToast('编辑成功~')
        // 5. 重新渲染
        render()
    } else {
        // 添加
        // 1. 收集用户的信息
        const data = serialize(form, { hash: true, empty: true })
        // 2. 处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary

        // 3. 提交数据
        await axios.post('/students', data)
        // 4. 提示用户
        showToast('添加成功~')
        // 5. 重新渲染
        render()
    }
    //隐藏模态框
    modal.hide()
})


// modal-title
// 监听模态框是否显示 显示修改模态框的标题
modalDom.addEventListener('show.bs.modal', event => {
    document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员' : '添加学员'
})
// 监听模态框是否隐藏 隐藏情况所有表单
modalDom.addEventListener('hide.bs.modal', event => {
    form.reset()
})

